<script setup>
import * as Cesium from 'cesium';
import CreatePolygon from "@/cesium/CreatePolygon";
import CutFillAnalysis from "@/cesium/CutFillAnalysis";
const viewer = ref();
const height = 70;
const precision = 1256;
const result = reactive({
        allArea: "",
        cutArea: "",
        cutVolume: "",
        fillArea: "",
        fillVolume: "",
        noArea: "",
})

onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjQ5ZThjOS1mNjBhLTRiMzAtOGU0Yi0xMWE5NjQyM2Y3ZjYiLCJpZCI6MTMxOTc5LCJpYXQiOjE2ODA1Njk1MTZ9.2fxItjlczdbOsfcLTE4H5x-viCEZ0-qql5AKlSS-aGE';
    viewer.value = new Cesium.Viewer("CesiumSettlement", {
      terrain: Cesium.Terrain.fromWorldTerrain(),
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      baseLayerPicker: false,
      navigationHelpButton: false,
      animation: false,
      timeline: false,
      fullscreenButton: false,
      vrButton: false,
      //关闭点选出现的提示框
      selectionIndicator: false,
      infoBox: false,
      
    });
    viewer.value.cesiumWidget.creditContainer.style.display = "none"; // 隐藏版权
    viewer.value.scene.globe.depthTestAgainstTerrain = true;
    // viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
    //         url: "../../../../../data/sjzTerrain/"
    //     })  
    viewer.value.camera.setView({
              destination: Cesium.Cartesian3.fromDegrees(114, 38, 1000000),
              orientation: {
                  heading: Cesium.Math.toRadians(0.0), // 水平偏角，默认正北 0
                  pitch: Cesium.Math.toRadians(-90), // 俯视角，默认-90，垂直向下
                  roll: 0.0 // 旋转角
              },
          });
    //initModel();
    getLocation();
    
    })
    // function initModel() {
    //   const tilesetModel = new Cesium.Cesium3DTileset({
    //     url: '../../data/model/tileset.json',
    //     //url: '../../data/model/tileset.json',
    //   });
    //   tilesetModel.readyPromise
    //     .then(function (tileset) {
    //       viewer.scene.primitives.add(tileset);
    //       viewer.flyTo(tileset);
    //     })
    //     .catch(function (error) {
    //       console.log(error);
    //     });
    // }
    function drawBoundary() {
     
      let cp = new CreatePolygon(viewer.value);
      cp.start(function () {
        startAnalysis(cp);
      });
    }
    function startAnalysis(boundary) {
      const analysisObj = new CutFillAnalysis(
        viewer.value,
        boundary.activeShapePoints,
        height,
        precision
      );
      result = analysisObj.VolumeAnalysis();
      viewer.value.entities.remove(boundary.polygon);
      viewer.value.scene.screenSpaceCameraController.enableCollisionDetection = false; //允许相机进入地下
    }
    function getLocation() {
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.value.canvas);
      handler.setInputAction(function(event){
        var earthPosition = viewer.value.scene.pickPosition(event.position);
        if (Cesium.defined(earthPosition)) {
          var cartographic = Cesium.Cartographic.fromCartesian(earthPosition);
          var lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
          var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
          var height = cartographic.height.toFixed(2);
          console.log(earthPosition, {
            lon: lon,
            lat: lat,
            height: height,
          });
        }
      },Cesium.ScreenSpaceEventType.LEFT_CLICK);
    
    }
</script>
<template>
    <div id="CesiumSettlement" class="settlement">
      <div class="fut-fill-tools" style='right: 0;'>
      <div class="tools-param">
        <span>
          高度值：
          <el-input size="mini" type="number" v-model="height"></el-input>
        </span>
        <span>
          精度：
          <el-input size="mini" type="number" v-model="precision"></el-input>
        </span>
      </div>
      <el-button size="mini" @click="drawBoundary">绘制区域</el-button>
      <div class="tool-result">
        <span>
          总分析面积(㎡)
          <el-input size="mini" v-model="result.allArea"></el-input>
        </span>
        <span>
          填方面积(㎡)
          <el-input size="mini" v-model="result.fillArea"></el-input>
        </span>
        <span>
          填方体积(m³)
          <el-input size="mini" v-model="result.fillVolume"></el-input>
        </span>
        <span>
          挖方面积(㎡)
          <el-input size="mini" v-model="result.cutArea"></el-input>
        </span>
        <span>
          挖方体积(m³)
          <el-input size="mini" v-model="result.cutVolume"></el-input>
        </span>
        <span>
          无须填挖面积(㎡)
          <el-input size="mini" v-model="result.noArea"></el-input>
        </span>
      </div>
    </div>
    </div>
</template>
<style lang="less" scoped>
.CesiumSettlement{
  position: relative;
  width: 100%;
  height: 100%;
}
.fut-fill-tools {
  position: absolute;
    margin: 10px;
    padding: 10px;
    z-index: 10;
    color: white;
    border: 1px solid rgb(36, 35, 35);
    border-radius: 5px;
    background-color: rgba(75, 74, 74, 0.8);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.tools-param {
  display: flex;
  margin-bottom: 10px;
}
.el-input {
  width: 80px;
        display: inline-block;
        margin-right: 10px;
      }
button {
      width: 97%;
    }
.tool-result {
  color: white;
    }
span {
  display: flex;
        width: 200px;
        margin: 5px ;
        justify-content: flex-end;
        
}
.el-input {
  width: 100px;
          display: inline-block;
          margin-left: 5px;
  }

</style>